<template>
  <div class="image">
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="专题详细"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>

    <div v-html="html"></div>
    <h3>专题推荐</h3>
    <div
      class="con-item"
      @click="target(item.id)"
      v-for="item in listData"
      :key="item.id"
    >
      <img :src="item.scene_pic_url" alt="" />
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
import { detailaction } from "@/api/topic/index";

export default {
  components: {},

  data() {
    return {
      topicId: 0,
      listData: "",
      html: "",
    };
  },

  created() {
    console.log(this.$route.params.id);
    this.topicId = 314;
    detailaction({ id: this.topicId }).then((res) => {
      console.log(res);
      this.html = res.data.content;
      this.listData = res.recommendList;
    });
  },

  mounted() {},

  methods: {
    target(num) {
      console.log(num);
      detailaction({ id: num }).then((res) => {
        console.log(res);
        this.html = res.data.content;
        this.listData = res.recommendList;
        this.$router.go(0);
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.image {
  width: 375px;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.image img {
  width: 375px;
}
h3 {
  width: 355px;
  margin: 20px auto;
}

.con-item {
  width: 315px;
  margin: 10px auto;
  padding: 15px;
  background-color: white;
  img {
    width: 315px;
    height: 139px;
  }
  p {
    width: 315px;
    text-align: left;
    padding: 10px 0 10px 0;
    font-size: 14px;
    font-weight: 300;
  }
}
</style>